<template>
  <div class="window" :style="{ zIndex: window.zIndex() }">
    <transition name="window-transition">
      <resize-box
        :application="application"
        :window="window"
        v-show="show"
        style="z-index: 0"
        :mask="childrenWindows.length > 0"
        :theme="window.theme"
      >
        <window-component :application="application" :window="window" />
      </resize-box>
    </transition>
    <div v-if="childrenWindows.length > 0" class="children-window" style="z-index: 1">
      <window
        v-for="(child, index) in childrenWindows"
        :key="child.id"
        :window="child"
        :application="application"
        :style="{ zIndex: index }"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, defineAsyncComponent } from "vue"
import ResizeBox from "./components/ResizeBox.vue"
import modules from "@/import-application"
import type BiuOS from "@/core/biu-os"

const props = defineProps({
  application: {
    type: Object as () => BiuOS.Application,
    required: true
  },
  window: {
    type: Object as () => BiuOS.Window,
    required: true
  }
})

const childrenWindows = computed(() => {
  if (props.window) {
    return [...props.window.children.values()]
  }
  return []
})

const WindowComponent = defineAsyncComponent(
  modules[
    `/src/application/${props.application?.info.content.home + "/" + props.window.content.path}.vue`
    ] as any
)

const show = computed(() => {
  return props.window?.getStatus() !== "minimize"
})
</script>

<style scoped lang="scss">
.window {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;

  .children-window {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
  }
}

.window-transition-enter-from,
.window-transition-leave-to {
  opacity: 0;
  scale: 0;
}

.window-transition-enter-active,
.window-transition-leave-active {
  transition: all 0.1s ease;
}
</style>
